<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container" style="max-width: 600px;margin-top: 50px;">
    <h3 class="page-header">注册</h3>
    <div class="well">
        <form action="/register" method="post" th:object="${userForm}">
            <div class="form-group">
                <label for="usernameId">用户名</label>
                <input type="text" name="username" id="usernameId" class="form-control" th:field="*{username}">
                <p class="form-control-static text-danger" th:if="${#fields.hasErrors('username')}"
                   th:errors="*{username}">*</p>
            </div>
            <div class="form-group">
                <label for="passwordId">密码</label>
                <input type="password" name="password" id="passwordId" class="form-control" th:field="*{password}">
                <p class="form-control-static text-danger" th:if="${#fields.hasErrors('password')}"
                   th:errors="*{password}">*</p>
            </div>
            <div class="form-group">
                <label for="confirmpasswordId">确认密码</label>
                <input type="password" name="confirmPassword" id="confirmpasswordId" class="form-control"
                       th:field="*{confirmPassword}">
                <p class="form-control-static text-danger" th:if="${#fields.hasErrors('confirmPassword')}"
                   th:errors="*{confirmPassword}">*</p>
            </div>
            <div class="form-group">
                <label for="emailId">邮箱</label>
                <input type="text" name="email" id="emailId" class="form-control" th:field="*{email}">
                <p class="form-control-static text-danger" th:if="${#fields.hasErrors('email')}" th:errors="*{email}">
                    *</p>
            </div>
            <div class="form-group">
                <label for="phoneId">手机号</label>
                <input type="text" name="phone" id="phoneId" class="form-control" th:field="*{phone}">
                <p class="form-control-static text-danger" th:if="${#fields.hasErrors('phone')}" th:errors="*{phone}">
                    *</p>
            </div>
            <p class="text-center">
                <button type="submit" class="btn btn-primary">注 册</button>
            </p>
        </form>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
</body>
</html>